<template>
	<view class="order">
		<u-subsection :list="listData" :current="curNow" @change="sectionChange"></u-subsection>
		<view class="order_orderDetails" v-for="item in orderStatusList" :key="item.id">
			<view class="order_orderDetails_head">
				<p style="font-size: 16px;margin-top: 4px;float:left;color:#AFAFAF;">订单号:</p>
				<p class="order_userText">{{item.orderNumber}}</p>
			</view>
			<view class="order_orderDetails_body">
				<p style="width: 190px;float:left;">{{item.mergerName}}</p>
				<p style="font-weight: bold;margin-left: 40px;width: 60px;float:left;">￥{{item.sumOrderPrice}}</p>
				<p style="font-size:14px;font-weight: bold;margin-left: 20px;width: 60px;float:left;color:#AFAFAF;">{{item.weight}}KG</p>
			</view>
				<view class="order_orderDetails_body">
					<p style="font-size: 16px;margin-top: 4px;float:left;margin-left:10px;color:#AFAFAF;">取餐号:</p>
					<p class="order_userText">{{item.takeOutNumber}}</p>
					<p style="font-size: 16px;margin-top: 4px;float:left;margin-left:50px;color:#AFAFAF;">送达时间:</p>
					<p class="order_userText">{{item.deliveryTime}}</p>
				</view>
			<u-button  type="primary" :plain="true" text="查看详情" shape="circle" style="width: 120px;height: 28px;float:left;" @click="distributeOrderDetails(item.orderNumber,item.takeOutNumber,item.mergerName,item.sumOrderPrice,item.weight,item.remark,item.createTime,item.deliveryTime,item.distributionMode)"></u-button>
			<u-button v-show="orderShow" @click="distributeOrder(item.id)" type="primary" :plain="true" text="派单" shape="circle" style="width: 120px;margin-left: 140px;height: 28px;float:left;"></u-button>
		</view>
		<u-popup :show="distributeOrderShow" mode="center"  @close="distributeOrderClose" :round="10">
			<view style="width: 260px;height: 160px;">
				<text style="font-weight: bold;margin-left: 70px;">请选择配送方式</text>
				  <u-radio-group
				    v-model="distributionMode"
				  >
				    <u-radio
				      :customStyle="{marginBottom: '8px',marginTop: '20px',marginLeft: '30px'}"
				      v-for="(item, index) in orderDistributionModeRadio"
				      :key="index"
				      :label="item.name"
				      :name="item.id"
				    >
				    </u-radio>
				  </u-radio-group>
				  <u-button type="primary" style="width: 90px;margin-top: 30px;" text="确定" @click="choseDeliveryMethod"></u-button>
			</view>
		</u-popup>
		<u-popup :show="distributeOrderDetailsShow"  mode="center"  @close="distributeOrderDetailsClose" :round="10">
			<view style="width: 320px;height: 360px;">
				<p style="margin-top: 14px;margin-left: 10px;font-size: 14px;font-weight: bold;">订单号：<span>{{this.orderNumber}}</span></p>
				<p style="margin-top: 6px;margin-left: 10px;font-size: 14px;font-weight: bold;">取餐号：<span>{{this.takeOutNumber}}</span></p>
				<p style="margin-top: 6px;margin-left: 10px;font-size: 14px;font-weight: bold;">送达地址：<span>{{this.orderMergerName}}</span></p>
				<p style="margin-top: 6px;margin-left: 10px;font-size: 14px;font-weight: bold;">金额：<span>￥{{this.sumOrderPrice}}</span></p>
				<p style="margin-top: 6px;margin-left: 10px;font-size: 14px;font-weight: bold;">重量：<span>{{this.weight}}KG</span></p>
				<p style="margin-top: 6px;margin-left: 10px;font-size: 14px;font-weight: bold;">买家备注：<span>{{this.remark}}</span></p>
				<p style="margin-top: 6px;margin-left: 10px;font-size: 14px;font-weight: bold;">下单时间：<span>{{this.createTime}}</span></p>
				<p style="margin-top: 6px;margin-left: 10px;font-size: 14px;font-weight: bold;">预计送达时间：<span>{{this.deliveryTime}}</span></p>
				<p style="margin-top: 6px;margin-left: 10px;font-size: 14px;font-weight: bold;">配送方式：<span>{{this.orderDistributionModeName}}</span></p>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 配送状态默认展示index为0的数据
				curNow: 0,
				// 存放配送状态
				listData:[],
				// 配送状态初始数据
				form:[],
				// 获取头部的商店id
				shopId:'',
				// 配送状态初始的订单信息
				orderStatusInitialList:[],
				// 配送状态对应的订单
				orderStatusList:[],
				// 派单按钮默认false
				orderShow:false,
				// 派单弹窗默认false
				distributeOrderShow:false,
				// 订单详情弹窗默认false
				distributeOrderDetailsShow:false,
				// 配送方式数组
				orderDistributionModeRadio:[
					{
						id:1,
						name:'骑手配送'
					},
					{
						id:2,
						name:'商家配送'
					}
				],
				// 配送方式默认选中骑手配送
				distributionMode:1,
				// 点击派单时，将id存进变量中
				orderDistributeId:'',
				// 配送状态
				distributionStatus:'',
				// 存放订单信息中的用户详细地址
				mergerName:'',
				// 订单详情里的订单号
				orderNumber:'',
				// 订单详情里的取餐号
				takeOutNumber:'',
				// .. 买家地址
				orderMergerName:'',
				// .. 餐品重量
				weight:'',
				// .. 买家备注
				remark:'',
				// .. 买家下单时间
				createTime:'',
				// .. 预计到达时间
				deliveryTime:'',
				// .. 配送方式
				orderDistributionMode:'',
				// .. 餐品金额
				sumOrderPrice:'',
				// 配送方式
				orderDistributionModeName:'',
			}
		},
		methods:{
			// 查询配送方式类型
			getOrderDistributionMode(){
				this.$myRequest({
					url:"/eat-service/commodityOrderDistributionMode/getOrderDistributionMode",
					data:{
						id: this.orderDistributionMode
					}
				}).then(res=>{
					this.orderDistributionModeName = res.data.obj.mode
				})
			},
			// 点击订单详情时
			distributeOrderDetails(orderNumber,takeOutNumber,mergerName,sumOrderPrice,weight,remark,createTime,deliveryTime,distributionMode){
				this.orderNumber = orderNumber
				this.takeOutNumber = takeOutNumber
				this.orderMergerName = mergerName
				this.sumOrderPrice =  sumOrderPrice
				this.weight = weight
				this.remark = remark
				this.createTime = createTime
				this.deliveryTime = deliveryTime
				this.orderDistributionMode = distributionMode
				this.getOrderDistributionMode()
				this.distributeOrderDetailsShow = true
			},
			// 关闭订单详情时
			distributeOrderDetailsClose(){
				this.distributeOrderDetailsShow = false
			},
			sectionChange(index) {
				this.curNow = index;
				this.form.forEach((item)=>{
					if(item.id === index+1){
						this.getCommodityOrderList(item.id)
					}
				})
				
			},
			// 初始化查询配送状态
			getCommodityOrderDistributionStatus(){
				this.$myRequest({
					url:'/eat-service/commodityOrderDistributionStatus/getCommodityOrderDistributionStatus'
				}).then(res=>{
					this.form = res.data.obj
					this.form.forEach((item)=>{
						this.listData.push(item.statusName)
					})
				})
			},
			// 查询对应配送状态的订单
			getCommodityOrderList(id){
				this.orderStatusList.splice(0)
				if(id===1)
					this.orderShow=true
				else
					this.orderShow=false
				this.$myRequest({
					url:'/eat-service/commodityOrder/getCommodityOrderList',
					data:{
						distributionStatus : id,
						shopId: this.shopId
					}
				}).then(res=>{
					this.orderStatusInitialList = res.data.obj
					this.orderStatusInitialList.forEach((item)=>{
						this.$myRequest({
							url:'/eat-service/area/getUserAreaAddress',
							data:{
								id:item.userAddressId
							}
						}).then(res=>{
							this.mergerName = res.data.obj.mergerName
							console.log(this.mergerName)
							this.$set(item,"mergerName",this.mergerName)
							this.orderStatusList.push(item)
						})
					})
				})
			},
			// 派单
			distributeOrder(id){
				this.orderDistributeId = id
				this.distributeOrderShow = true
			},
			// 派单弹窗关闭方法
			distributeOrderClose(){
				this.distributeOrderShow = false
			},
			// 确认配送方式
			choseDeliveryMethod(){
				if(this.distributionMode===1)
					this.form.forEach((item)=>{
						if(item.statusName==='待接单')
							this.distributionStatus = item.id
					})
				else
					this.form.forEach((item)=>{
						if(item.statusName==='派送中')
							this.distributionStatus = item.id
					})
				this.$myRequest({
					url:'/eat-service/commodityOrder/choseDeliveryMethod',
					method:'POST',
					data:{
						id: this.orderDistributeId,
						distributionMode: this.distributionMode,
						distributionStatus:this.distributionStatus
					},
					dataType:'json'
				}).then(res=>{
					if(res.data.flag){
						this.distributeOrderShow = false
						// 初始化加载未派送订单信息
						this.getCommodityOrderList(this.curNow+1)
						uni.showToast({
							title: '成功',
							//将值设置为 success 或者直接不用写icon这个参数
							icon: 'success',
							//显示持续时间为 2秒
							duration: 2000
						})
					}
				})
			},
		},
		onLoad() {
			
			// 初始化查询配送状态
			this.getCommodityOrderDistributionStatus()
			// 获取头部的商店id
			this.shopId = uni.getStorageSync('shopId')
			// 初始化加载未派送订单信息
			this.getCommodityOrderList(this.curNow+1)
		}
	}
</script>

<style>
	.order{
		width: 414px;
		height: 852px;
	}
	.order_orderDetails{
		width:380px;
		height: 140px;
		margin-top: 20px;
		background-color: aliceblue;
		margin-left: 20px;
		overflow: hidden;
	}
	.order_orderDetails_head{
		width: 380px;
		height: 35px;
	}
	.order_image{
		width:35px;
		height: 35px;
		margin-left: 16px;
		float: left;
	}
	.order_userText{
		font-size: 14px;
		font-weight: bold;
		margin-left: 8px;
		width: 80px;
		float: left;
		margin-top: 6px;
	}
	.order_orderDetails_body{
		width: 380px;
		height: 35px;
	}
</style>